<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="设置页面控制按钮" :model-value="visible"
		@close="onCancel">
		<template #footer>
			<el-button key="back" @click="() => onCancel()">取消</el-button>
			<el-button key="submit" type="primary" @click="onFinish">提交</el-button>
		</template>
		<el-table ref="multipleTableRef" :data="tableData" style="width: 100%">

			<el-table-column prop="isUse" width="55">
				<template #default="{row}">
					<el-checkbox v-model="row.isUse"></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="按钮名称" width="180" />
			<el-table-column prop="desc" label="功能说明" width="180" />
		</el-table>


	</el-dialog>
</template>

<script setup lang="ts">
	import { ElTable } from 'element-plus'
	import { ApiUpdateRoleModuleBtns } from '../service'
	import {
		ref,
		watch
	} from "vue";
	const props = defineProps({
		data: {
			type: String,
			required: true
		},
		roleId: {
			type: Number,
			required: true
		},
		visible: {
			type: Boolean,
			required: true
		},
		onCancel: {
			type: Function,
			required: true
		},
		onSubmit: {
			type: Function,
			required: true
		},
	})
	const tableData = ref()
	watch(() => props.visible, (newValue, oldValue) => {
		if (newValue) {
			tableData.value = JSON.parse(props.data.btns)
			console.log(tableData.value)
		}
	})
	const isUpdate = ref(true)
	const multipleTableRef = ref<InstanceType<typeof ElTable>>()
	const onFinish = () => {
		// let selectRows = multipleTableRef.value!.getSelectionRows();
		// console.log('selectRows', selectRows.value)
		// console.log(props.data)
		ApiUpdateRoleModuleBtns(props.roleId, props.data.id, JSON.stringify(tableData.value))

		props.onSubmit()
	}
</script>

<style>
</style>